<!-- <template>
  <div id="app">
    <div id="vditor"></div>
  </div>
</template>

<script>
import Vditor from 'vditor';
import 'vditor/dist/index.css';

export default {
  name: 'App',
  components: {},
  data() {
    return {
      contentEditor: '',
    }
  },
  mounted() {
    this.contentEditor = new Vditor('vditor', {
      height: 360,
      typewriterMode: true,
      toolbarConfig: {
        pin: true
      },
      preview: {
        mode: 'both',
      },
      cache: {
        enable: false,
      },
      after: () => {
        this.contentEditor.setValue('# hello, Vditor + Vue!');
      }
    })
  },
}
</script>

<style>
.vditor-toolbar {
  display: none !important;
}
</style> -->


<!-- 组合式 -->
<!-- <template>
  <div id="vditor" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import Vditor from 'vditor';
import 'vditor/dist/index.css';

const vditor = ref<Vditor | null>(null);

onMounted(() => {
  vditor.value = new Vditor('vditor', {
    after: () => {
      // vditor.value is a instance of Vditor now and thus can be safely used here
      vditor.value!.setValue('Vue Composition API + Vditor + TypeScript Minimal Example');
    },
  });
});
</script> -->


<template>
  <div id="app">
    <div id="vditor"></div>
  </div>
</template>

<script>
import Vditor from 'vditor';
import 'vditor/dist/index.css';

export default {
  name: 'App',
  components: {},
  data() {
    return {
      contentEditor: '',
    }
  },
  mounted() {
    this.contentEditor = new Vditor('vditor', {
      height: 360,
      typewriterMode: true,
      after: () => {
        this.contentEditor.setValue(`
$$
\begin{align*}
e^x & = 1 + x + \frac{x^2}{2!} + \frac{x^3}{3!} + \frac{x^4}{4!} + \cdots \\
    & = \sum_{n=0}^{\infty} \frac{x^n}{n!}
\end{align*}
$$

   `);
      }
    })
  },
}
</script>

<style>
.vditor-toolbar {
  display: none !important;
}

.vditor-reset {
  padding: 10px !important;
}
</style>